<template>
	<view>
		<!-- 筛选栏 -->
		<view class="filter">
			<view class="item" :class="filterActive==0?'active':'ZW'" @click="synthesizeBtn(0)">
				<text>综合</text>
			</view>
			<view class="item" :class="filterActive==1?'active':'ZW'" @click="gradeBtn(1)">
				<text>等级</text>
				<uni-icon :type="iconActive==1?'arrow-up':'arrow-down'" size="12"></uni-icon>
			</view>
			<view class="item" :class="filterActive==2?'active':'ZW'" @click="priceBtn(2)">
				<text>价格</text>
				<uni-icon :type="iconActive==2?'arrow-up':'arrow-down'" size="12"></uni-icon>
			</view>
			<view class="item" :class="filterActive==3?'active':'ZW'" @click="moreBtn(3)">
				<text>更多</text>
				<uni-icon :type="iconActive==3?'arrow-up':'arrow-down'" size="12"></uni-icon>
			</view>
		</view>
		<!-- 等级筛选框 -->
		<view class="showad" v-if="showadActive==1?true:false" @click="closeBtn(0)" catchtouchmove="move">
			<view class="filterBox" @click.stop>
				<view class="contentBox">
					<button :class="star==''?'active':'ZW'" @click="gradeSelect('')">等级不限</button>
					<button :class="star==2?'active':'ZW'" @click="gradeSelect(2)">二星级月嫂</button>
					<button :class="star==3?'active':'ZW'" @click="gradeSelect(3)">三星级月嫂</button>
					<button :class="star==4?'active':'ZW'" @click="gradeSelect(4)">四星级月嫂</button>
					<button :class="star==5?'active':'ZW'" @click="gradeSelect(5)">五星级月嫂</button>
					<button :class="star==6?'active':'ZW'" @click="gradeSelect(6)">六星级月嫂</button>
					<button :class="star==7?'active':'ZW'" @click="gradeSelect(7)">金牌月嫂</button>
					<button :class="star==8?'active':'ZW'" @click="gradeSelect(8)">月嫂管家</button>
				</view>
				<view class="btnBox">
					<button class="no" @click="closeBtn(0)">取消</button>
					<button class="yes" @click="gradeConfirm">确定</button>
				</view>
			</view>
		</view>
		<!-- 价格筛选框 -->
		<view class="showad" v-if="showadActive==2?true:false" @click="closeBtn(0)" catchtouchmove="move">
			<view class="filterBox" @click.stop>
				<view class="contentBox">
					<button :class="orderby_price==''?'active':'ZW'" @click="priceSelect('')">价格不限</button>
					<button :class="orderby_price==1?'active':'ZW'" @click="priceSelect(1)">从低到高</button>
					<button :class="orderby_price==2?'active':'ZW'" @click="priceSelect(2)">从高到低</button>
				</view>
				<view class="btnBox">
					<button class="no" @click="closeBtn(0)">取消</button>
					<button class="yes" @click="priceConfirm">确定</button>
				</view>
			</view>
		</view>
		<!-- 更多筛选框 -->
		<view class="showad" v-if="showadActive==3?true:false" @click="closeBtn(0)" catchtouchmove="move">
			<view class="filterBox" @click.stop style="min-height: 700upx;">
				<view class="title">经验要求</view>
				<view class="contentBox">
					<button :class="year==''?'active':'ZW'" @click="yearSelect('')">经验不限</button>
					<button :class="year=='1-2'?'active':'ZW'" @click="yearSelect('1-2')">1-2年</button>
					<button :class="year=='3-4'?'active':'ZW'" @click="yearSelect('3-4')">3-4年</button>
					<button :class="year=='5-99'?'active':'ZW'" @click="yearSelect('5-99')">5年以上</button>
				</view>
				<view class="title">年龄要求</view>
				<view class="contentBox">
					<button :class="age==''?'active':'ZW'" @click="ageSelect('')">年龄不限</button>
					<button :class="age=='0-30'?'active':'ZW'" @click="ageSelect('0-30')">30岁以下</button>
					<button :class="age=='31-40'?'active':'ZW'" @click="ageSelect('31-40')">31-40岁</button>
					<button :class="age=='41-99'?'active':'ZW'" @click="ageSelect('41-99')">41岁以上</button>
				</view>
				<view class="btnBox">
					<button class="no" @click="closeBtn(0)">取消</button>
					<button class="yes" @click="moreConfirm">确定</button>
				</view>
			</view>
		</view>
		<!-- 月嫂列表 -->
		<view class="list">
			<view class="item" v-for="(item, index) in womanList" :key="index" @click="openWomanDetail(item.id)">
				<view class="headImg">
					<image :src="item.head_url" mode="scaleToFill" lazy-load="true"></image>
				</view>
				<view class="desc">
					<view class="price">￥<text>{{item.price}}</text>元/26天</view>
					<view class="title">
						<text>【{{item.name}}】</text>
						<text>{{item.introduce}}</text>
					</view>
					<view class="year">
						{{item.age}}岁 | {{item.native_place}}人 | 从业{{item.year}}年
					</view>
					<view>
						<text class="label">{{item.star_name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import { dns } from "@/pages/dns.js";
	export default {
		data(){
			return {
				filterActive: 0,//控制筛选栏样式
				showadActive: 0,//控制筛选框显示
				iconActive: 0,//控制icon标签向上还是向下
				womanList: [],//月嫂列表
				page: 1,//页数
				region: '',//地区
				star: '',//月嫂等级参数
				orderby_price: '',//月嫂价格参数
				year: '',//月嫂经验参数
				age: '',//月嫂年龄
			}
		},
	    components: {
			uniIcon
		},
		onLoad(e) {
			this.region = uni.getStorageSync("region");
			this.getwomanList(1,20,this.region,'','','','');
		},
		onShow() {
			var refresh = uni.getStorageSync("refresh");
			if(refresh == 1){
				this.womanList = [];
				this.getwomanList(1,20,this.region,'','','','');
				uni.removeStorageSync("refresh");
			}
		},
		onReachBottom:function(e){//监听用户触底事件，上拉加载
			this.page++;
		    this.getwomanList(this.page,20,this.region,'','','','');
		},
		methods:{
			getwomanList(page,limit,region,star,orderby_price,year,age){//获取月嫂列表
				uni.showLoading({
				    title: '加载中'
				});
				uni.request({
					method: 'GET',
					data: {
						page,
						limit,
						region,
						star,
						orderby_price,
						year,
						age
					},
					url: dns + 'matron/list',
					success:(res)=>{
						let length = res.data.data.length;
						uni.hideLoading();
						if(res.data.status == 1){
							res.data.data.forEach((val,ind)=>{
								this.womanList.push(val)
							})
						}
						if(res.data.status == 0 && res.data.msg == "暂无最新消息"){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			},
			synthesizeBtn(num){//综合
				this.filterActive = num;
				this.showadActive = num;
				this.womanList = [];
				this.getwomanList(1,20,this.region,'','','','');
			},
			gradeConfirm(){//确定月嫂等级排序
				this.closeBtn(0);
				this.womanList = [];
				this.getwomanList(1,20,this.region,this.star,'','','');
			},
			priceConfirm(){//确定月嫂价格排序
				this.closeBtn(0);
				this.womanList = [];
				this.getwomanList(1,20,this.region,'',this.orderby_price,'','');
			},
			moreConfirm(){//确定月嫂经验,年龄排序
				this.closeBtn(0);
				this.womanList = [];
				this.getwomanList(1,20,this.region,'','',this.year,this.age);
			},
			gradeBtn(num){// 等级
				this.filterActive = num;
				this.showadActive = num;
				this.iconActive = num;
			},
			priceBtn(num){//价格
				this.filterActive = num;
				this.showadActive = num;
				this.iconActive = num;
			},
			moreBtn(num){//更多
				this.filterActive = num;
				this.showadActive = num;
				this.iconActive = num;
			},
			closeBtn(num){//关闭筛选框
				this.showadActive = num;
				this.iconActive = num;
			},
			move(){//解决弹框滚动穿透
				return
			},
			gradeSelect(num){//选择月嫂等级btn
				this.star = num
			},
			priceSelect(num){//选择月嫂价格btn
				this.orderby_price = num
			},
			yearSelect(num){//选择月嫂经验btn
				this.year = num
			},
			ageSelect(num){//选择月嫂年龄btn
				this.age = num
			},
			openWomanDetail(id) { //打开月嫂详情介绍
				uni.navigateTo({
					url: '/pages/index/detail/index?id='+id
				});
			}
		}
	}
</script>

<style lang="scss">
	.filter{
		line-height: 80upx;
		border-bottom: 2upx solid #eee;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		.item{
			font-size: 28upx;
			width: 25%;
			text-align: center;
		}
		.active{
			color: #f45f61;
		}
	}
	//价格筛选框
	.showad{
		position: fixed;
		top: 82upx;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.3);
		z-index: 999;
		.filterBox{
			position: relative;
			min-height: 520upx;
			background-color: #fff;
			.title{
				font-size: 16px;
				padding-left: 30upx;
				padding-top: 30upx;
			}
			.contentBox{
				width: 100%;
				padding: 20upx 0;
				display: flex;
				flex-wrap: wrap;
				align-content:flex-start;
				button{
					width: 220upx;
					height: 60upx;
					line-height: 60upx;
					display: inline-block;
					background-color: #fafafa;
					border-radius: 6upx;
					margin: 16upx calc((100% - 660upx) / 6);
				}
				.active{
					background-color: #fc3537;
					color: #fff;
				}
			}
			.btnBox{
				position: absolute;
				bottom: 24upx;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 30upx;
				button{
					line-height: 84upx;
					border-radius: 12upx;
					font-size: 32upx;
				}
				.no{
					width: 220upx;
					border: 2upx solid #eee;
					color: #000;
				}
				.yes{
					width: 440upx;
					background-image: linear-gradient(to right, #fc3234, #fe6566);
					color: #fff;
				}
				
			}
		}
	}
	//月嫂列表
	.list{
		margin-top: 80upx;
		padding: 0upx 30upx;
		.item{
			border-bottom: 2upx solid #eee;
			padding: 30upx 0;
			display: flex;
			justify-content: space-between;
			.headImg{
				width: 160upx;
				height: 200upx;
				overflow: hidden;
				image{
					transform: translate(-20upx,0);
					width: 200upx;
					height: 100%;
				}
			}
			.desc{
				width: 72%;
				position: relative;
				.price{
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 24upx;
					color: #8f929e;
					text{
						font-size: 34upx;
						color: #f45f61;
					}
				}
				.title{
					font-size: 16px;
					margin-bottom: 8px;
				}
				.year{
					font-size: 24upx;
					color: #8f929e;
					margin-bottom: 16upx;
				}
				.label{
					font-size: 18upx;
					color: #f45f61;
					padding: 3upx 10upx;
					border: 2upx solid rgba(235, 93, 94,0.3);
					border-radius: 4upx;
				}
			}
		}
	}
</style>
